<template>
  <div class="page-wrapper">
    <TestField
      v-if="checkPayeeAcct"
      checkProp="payeeAccount"
      checkLabel="付款账户校验"
      :checkCallback="checkPayeeAcct"
    ></TestField>
    <TestField
      v-if="checkPayeeName"
      checkProp="payeeName"
      checkLabel="付款户名校验"
      :checkCallback="checkPayeeName"
    ></TestField>
    <TestField
      v-if="checkMobilePhone"
      checkProp="mobilePhone"
      checkLabel="流动电话校验"
      :t-data="mobileDatas"
      :checkCallback="checkMobilePhone"
    ></TestField>
    <TestField
      v-if="checkBankAmount"
      checkProp="bankAmount"
      checkLabel="银行金额校验"
      :checkCallback="checkBankAmount"
    ></TestField>
    <TestField
      v-if="checkOTP"
      checkProp="otp"
      checkLabel="OTP校验"
      :checkCallback="checkOTP"
    ></TestField>
    <TestField
      v-if="checkEmailAddress"
      checkProp="emailAddress"
      checkLabel="用户邮箱校验"
      :t-data="emailDatas"
      :checkCallback="checkEmailAddress"
    ></TestField>
  </div>
</template>

<script>
import emailDatas from "./data/email-address";
import mobileDatas from "./data/mobiles";

import { TestField } from "@/components/fields";
import { CommonValidator } from "@/libs/validator";

export default {
  name: "CheckValidate",
  components: {
    TestField,
  },
  data() {
    const {
      checkIsNull,

      checkPayeeAcct,
      checkPayeeName,
      checkMobilePhone,
      checkBankAmount,
      checkOTP,
      checkEmailAddress,
    } = new CommonValidator();

    // console.log(CommonValidator.prototype.checkEmailAddress);

    return {
      checkPayeeAcct: [
        checkIsNull("收款账户不能为空"),
        checkPayeeAcct("付款账户不合法"),
      ],
      checkPayeeName: checkPayeeName("付款户名不合法"),
      checkMobilePhone: checkMobilePhone("流动电话不合法"),
      checkBankAmount: checkBankAmount("输入金额不合法"),
      checkEmailAddress: checkEmailAddress("用户邮箱不合法"),
      checkOTP: checkOTP("输入OTP不合法"),

      emailDatas,
      mobileDatas,
    };
  },
  mounted() {},
};
</script>

<style lang="scss" scoped></style>
